<template>
    <div>
        <!-- 蒙版 -->
        <teleport  to='body'>
        <transition name="fade">
            <div v-if="isVisable" @click="isVisable = false" class="w-screen h-screen bg-zinc-900/80 z-40 fixed top-0 left-0"></div>

        </transition>
        <!-- 内容 -->
        <transition name="popup-down-up">
<<<<<<< HEAD
            <div v-if="isVisable" v-bind="$attrs" class=" w-screen bg-white z-50 fixed bottom-0">
=======
            <div v-if="isVisable" v-bind="$attrs" class=" w-screen dark:bg-zinc-800 dark:text-zinc-200 bg-white z-50 fixed bottom-0">
>>>>>>> e4e98f4a46ac18500120564c91c0373b28be926c
                <slot />
            </div>
        </transition>
        </teleport>
    </div>
</template>
<script setup>
import { useScrollLock,useVModel } from '@vueuse/core'
import { watch } from 'vue'
const props = defineProps({
    modelValue:{
        required:true,
        type:Boolean
    }
})

const emit = defineEmits(['update:modelValue'])

//是一个响应式数据,当 isVisable 值发生变化时,会自动触发 emit 修改modelValue
const isVisable = useVModel(props,'modelValue',emit)

//锁定页面滚动
const isLocked = useScrollLock(document.body)
watch(
    isVisable,
    (val) => {
        isLocked.value = val
    },
    {
        immediate:true
    }
    )
</script>
<style lang="scss" scoped>
.fade-enter-active,
.fade-leave-active{
    transition: all 0.3s;
}
// 准备进入，离开完成
.fade-enter-from,
.fade-leave-to{
    opacity: 0;
}

<<<<<<< HEAD
.popup-down-up-enter-active{
    transition: all 0.3s;
}
.popup-down-up-leave-active{
    transition: all 0.1s;
=======
.popup-down-up-enter-active,
.popup-down-up-leave-active{
    transition: all 0.3s;
>>>>>>> e4e98f4a46ac18500120564c91c0373b28be926c
}

.popup-down-up-enter-from,
.popup-down-up-leave-to{
    transition: translateY(100%)
}
</style>